<template>
  <div class="form-container">
    <van-tabs
      v-model:active="active"
      swipeable
      sticky
      color="#0378FE"
      line-width="24px"
      line-height="2px"
    >
      <template #nav-right>
        <img :src="filterIconPath" class="filter-icon" @click="filterHandle" />
      </template>
      <van-tab
        v-for="(mod, index) in formTypeList"
        :key="index"
        :title="mod.title"
      >
       <formMainListView :formType="mod.type"></formMainListView>
      </van-tab>
    </van-tabs>
    <formFilterView v-if="showFileView" class="filter-view" :formType="formTypeList[active].type"></formFilterView>
  </div>
</template>

<script setup>
import formFilterView from "@/components/formFilterView.vue";
import formMainListView from "@/components/formMainListView.vue";
import { FormTypeEnum } from "@/utils/enum";
import { ref, onMounted,computed } from "vue";
import { globalEvent } from "@/main";
// import { showToast } from "vant";

const active = ref(0);
//显示筛选条目
const showFileView= ref(false);
//主页显示表单类型
const formTypeList = [
  { title: "待办工单", type: FormTypeEnum.TODO },
  { title: "延期工单", type: FormTypeEnum.DELAY },
  { title: "退单工单", type: FormTypeEnum.ROLLBACK },
];

onMounted(() => {
  globalEvent.on('myGlobalEvent', () => {
    showFileView.value = false;
  });
});

// 筛选框图片修改
const filterIconPath = computed(() => {
  return showFileView.value
    ? require("@/assets/img/form/filter_select_icon.png")
    : require("@/assets/img/form/filter_icon.png");
});



const filterHandle = (() => {
  showFileView.value = !showFileView.value;
});
</script>

<script>
export default {
  name: "formMainPage",
};
</script>

<style lang="less" scoped>
.form-container {
  .filter-icon {
    width: 40px;
    height: 40px;
    margin: auto 40px;
    object-fit: contain;
  }

  :deep(.van-tabs__wrap) {
    height: 88px;
  }

  .filter-view {
    position: fixed;
    left: 0;
    top: 88px;
  }

  :deep(.van-tab) {
    font-size: 32px;
  }

  
}
</style>
